<template>
    <div class="container">
          <div class="title">
              <dv-border-box-4 :color="['pink']" style="color: aliceblue;height: 120px;width: 900px;">
              </dv-border-box-4>
              <dv-border-box-4 :color="['turquoise']" :reverse="true" style="height: 120px;width: 900px;"></dv-border-box-4>
              <div class="head-title">居民平均工资与存款余额的关系</div>
          </div>
            <dv-border-box-8 class="list">
              <ul>
                <li>
                    <router-link to="/home" class="link" style="color:blanchedalmond;">首页</router-link>
                </li>
                <li>
                    <router-link to="/year_value_ral" class="link" style="color: aquamarine;">生产总值与年份的关系</router-link>
                </li>
                <li>
                    <router-link to="/houseprice_tendency"class="link" style="color: lightpink;">各城市房价变化趋势</router-link>
                </li>
                <li>
                    <router-link to="/peoplenum_value_ral"class="link" style="color: darkturquoise;">居民数量与生产总值的关系</router-link>
                </li>
                <li>
                    <router-link to="/city_bdinvestment_rank"class="link" style="color: coral;">各城市房地产投资金额</router-link>
                </li>
                <li>
                    <router-link to="/avgwage_depbalance_ral"class="link" style="color: goldenrod;">居民平均工资与存款的关系</router-link>
                </li>
                <li>
                  <router-link to="/City_Value_Rank"class="link" style="color: slateblue;">全国各城市生产总值排名</router-link>
              </li>
              <li>
                  <router-link to="/income_expenses_ral"class="link" style="color: thistle;">地方支出与收入的关系</router-link>
              </li>
      
          </ul>
        </dv-border-box-8>
        <div class="body" id="main1">
            
        </div>
    </div>
        
  </template>
      
  <script setup>
    import * as echarts from 'echarts'
  import { onMounted,reactive, triggerRef } from 'vue';
  import axios from 'axios';
   let options = reactive([])
  const markCharts = () => {
  var chartDom = document.getElementById("main1");
  var myChart = echarts.init(chartDom,"light");
  
   var option = {
    tooltip:{
        trigger:'axis'
    },
    xAxis:{
            type:'category',
            data:[],
            axisLabel: {
            interval:10,
            rotate: 45,   
            fontSize: 12, 
            color:'white'
            },
            min:0,
            max:286,
            name:"居民工资/元",
            nameTextStyle:{
                color:'pink',
                fontSize: 20,
            },
            
        },
        yAxis:{
            type:'value',
            axisLabel:{
                color:'white'
            },
            max:'30000',
            name:'生产总值/亿元',
            nameTextStyle:{
                color:'pink',
                fontSize: 20,
            },
        },
        series:[
            {
                data:[],
                type:'line',
                label:{
                    show:true,
                    position:'top',
                    textStyle:{
                            fontSize:16,
                            color:'white'
                }
                }
            },
            

        ],

  };
  const xdata = reactive([])
    const ydata = reactive([])
    for(let index=0;index<options.length;index++){
        let obj = options[index];
        xdata.push(obj.averagewage);
        ydata.push(obj.depositbalance)
    }
    option.xAxis.data = xdata
    option.series[0].data = ydata

  option && myChart.setOption(option);
};

function getData(){
    axios.get('/api/queryAllavgwage_Depbalance_Ral')
    .then((response)=>{
console.log(response.data)
if(response.data.code==200){
console.log(response.data.data)
options = response.data.data;
//=:初始化图表
markCharts();
}
})
}
onMounted(()=>{
    getData();
})
  
      
  </script>
      
  <style scoped>
  .container{
      background-image: url('../imgs/bg.png');
      width: 100vw;
      height: 100vh;
      background-size: cover;
      position: absolute;
      left: 0;
      top: 0;
  }
  .title{
      height: 100px;
      width: 100vw;
      text-align: center;
      font-size: 50px;
      display: flex;
  }
  .list{
    height: 100px;
    
    width: 100vw;

}
li{
    flex: 1;
    text-align: center;
}
ul{
    display: flex;
    justify-content: space-between;
    list-style-type: none;
}
.link{
    color: aliceblue;
    text-decoration: none;
    line-height: 100px;
    transition: background-color 0.3s;
    border-radius: 5px;
    
}
.link:hover{
    color: red;
    background-color: pink;
}
.body{
    width: 100vw;
    height: 830px;
}
.head-title{
    color:rgb(253, 190, 190);
    position: absolute;
    right: 30%;
    top:30px;
    font-family:'Times New Roman', Times, serif;

}
  </style>